﻿@typeparam Model
@inherits AuthBlazorComponentBase
@implements IDisposable

@if (invalidAccess != null)
{
    <div class="w-body md:w-body overflow-auto">
        <EnsureAccess Title=@($"View {typeof(Model).Name}") HtmlMessage=@invalidAccess />
    </div>
}
else
{
    <CascadingValue Value="ModalLookup">
    <div class="pt-1">

    <CascadingValue Value="AppMetadata">
    @if (New == true)
    {
        if (invalidCreateAccess != null)
        {
            <EnsureAccess Title=@($"New {typeof(Model).Name}") HtmlMessage=@invalidCreateAccess Done="OnNewDone" />
        }
        else if (CreateForm != null)
        {
            @CreateForm
        }
        else if (Apis!.Create != null)
        {
            <AutoCreateForm @ref="AutoCreateForm" Model="Model" ApiType="Apis!.Create" Done="OnNewDone" Save="OnNewSave" />
        }
    }
    else if (EditModel != null)
    {
        if (invalidUpdateAccess != null)
        {
            <EnsureAccess Title=@($"Edit {typeof(Model).Name}") HtmlMessage=@invalidUpdateAccess Done="OnEditDone" />
        }
        else if (EditForm != null)
        {
            @EditForm(EditModel)
        }
        else if (Apis!.Patch != null || Apis!.Update != null)
        {
            <AutoEditForm @ref="AutoEditForm" Model="Model" Edit="EditModel" ApiType="Apis!.Patch ?? Apis!.Update" DeleteApiType="Apis!.Delete" Done="OnEditDone" Save="OnEditSave" Delete="OnEditSave" />
        }
    }
    </CascadingValue>

    @if (Toolbar != null)
    {
        @Toolbar
    }
    else if (ShowToolbar)
    {
        <QueryPrefs Show=@ShowQueryPrefs Columns="ViewModelColumns" Prefs="ApiPrefs" Done="() => ShowQueryPrefs = false" Save="saveApiPrefs" />
        <div class="pl-1 pt-1 flex flex-wrap">
            <div class="flex mt-1">
            @if (ShowPreferences)
            {
                <button type="button" class="pl-2 text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" title=@($"{typeof(Model).Name} Preferences") @onclick="_ => ShowQueryPrefs = !ShowQueryPrefs">
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-width="1.5" fill="none"><path d="M9 3H3.6a.6.6 0 0 0-.6.6v16.8a.6.6 0 0 0 .6.6H9M9 3v18M9 3h6M9 21h6m0-18h5.4a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H15m0-18v18" stroke="currentColor" /></g></svg>
                </button>
            }
            @if (ShowPagingNav)
            {
                <button type="button" class=@ClassNames("pl-2", canFirst ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
                    title="First page" disabled=@(!canFirst) @onclick="_ => skipTo(-Total)">
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z" fill="currentColor" /></svg>
                </button>
                <button type="button" class=@ClassNames("pl-2", canPrev ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
                    title="Previous page" disabled=@(!canPrev) @onclick="_ => skipTo(-ApiPrefs.Take)">
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z" fill="currentColor" /></svg>
                </button>
                <button type="button" class=@ClassNames("pl-2", canNext ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
                    title="Next page" disabled=@(!canNext)  @onclick="_ => skipTo(ApiPrefs.Take)">
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor" /></svg>
                </button>
                <button type="button" class=@ClassNames("pl-2", canLast ? "text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400" : "text-gray-400 dark:text-gray-500")
                    title="Last page" disabled=@(!canLast) @onclick="_ => skipTo(Total)">
                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z" fill="currentColor" /></svg>
                </button>
            }
            </div>
            @if (ShowPagingInfo)
            {
            <div class="flex mt-1">
                <div class="px-4 text-lg text-black dark:text-white">
                    @if (apiLoading)
                    {
                        <span>Querying...</span>
                    }
                    else if (Results.Count > 0)
                    {
                        <span>
                            <span class="hidden xl:inline">
                                Showing Results
                            </span> 
                            @(Skip + 1) - @Math.Min(Skip + Results.Count, Total) <span> of @Total</span>
                        </span>
                    }
                    else if (Api != null)
                    {
                        <span>No Results</span>
                    }
                </div>
            </div>
            }
            <div class="flex flex-wrap">
            @if (ShowRefresh)
            {
                <div class="pl-2 mt-1">
                    <button type="button" @onclick="RefreshAsync" title="Refresh" class=@ToolbarButtonClass>
                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 20v-5h-5M4 4v5h5m10.938 2A8.001 8.001 0 0 0 5.07 8m-1.008 5a8.001 8.001  0 0 0 14.868 3" /></svg>
                    </button>
                </div>
            }
            @if (ShowDownloadCsv)
            {
                <div class="pl-2 mt-1">
                    <button type="button" @onclick="downloadCsv" title="Download CSV" class=@ToolbarButtonClass>
                        <svg class="w-5 h-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28.781 4.405h-10.13V2.018L2 4.588v22.527l16.651 2.868v-3.538h10.13A1.162 1.162 0 0 0 30 25.349V5.5a1.162 1.162 0 0 0-1.219-1.095zm.16 21.126H18.617l-.017-1.889h2.487v-2.2h-2.506l-.012-1.3h2.518v-2.2H18.55l-.012-1.3h2.549v-2.2H18.53v-1.3h2.557v-2.2H18.53v-1.3h2.557v-2.2H18.53v-2h10.411z" fill="#20744a" fill-rule="evenodd" /><path fill="#20744a" d="M22.487 7.439h4.323v2.2h-4.323z" /><path fill="#20744a" d="M22.487 10.94h4.323v2.2h-4.323z" /><path fill="#20744a" d="M22.487 14.441h4.323v2.2h-4.323z" /><path fill="#20744a" d="M22.487 17.942h4.323v2.2h-4.323z" /><path fill="#20744a" d="M22.487 21.443h4.323v2.2h-4.323z" /><path fill="#fff" fill-rule="evenodd" d="M6.347 10.673l2.146-.123l1.349 3.709l1.594-3.862l2.146-.123l-2.606 5.266l2.606 5.279l-2.269-.153l-1.532-4.024l-1.533 3.871l-2.085-.184l2.422-4.663l-2.238-4.993z" /></svg>
                        <span class="text-green-900 dark:text-green-100">Excel</span>
                    </button>
                </div>
            }
            @if (ShowCopyApiUrl)
            {
                <div class="pl-2 mt-1">
                    <button type="button" @onclick="copyApiUrl" title="Copy API URL" class=@ToolbarButtonClass>
                    @if (copiedApiUrl) 
                    {
                        <svg class="w-5 h-5 mr-1 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    } 
                    else 
                    {
                        <svg class="w-5 h-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /><path d="M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></g></svg>
                    }
                        <span class="whitespace-nowrap">Copy URL</span>
                    </button>
                </div>
            }
            @if (hasPrefs && ShowResetPreferences)
            {
                <div class="pl-2 mt-1">
                    <button type="button" @onclick="ResetPreferencesAsync" title="Reset Preferences & Filters" class=@ToolbarButtonClass>
                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M6.78 2.72a.75.75 0 0 1 0 1.06L4.56 6h8.69a7.75 7.75 0 1 1-7.75 7.75a.75.75 0 0 1 1.5 0a6.25 6.25 0 1 0 6.25-6.25H4.56l2.22 2.22a.75.75 0 1 1-1.06 1.06l-3.5-3.5a.75.75 0 0 1 0-1.06l3.5-3.5a.75.75 0 0 1 1.06 0Z" /></svg>
                    </button>
                </div>
            }
            @if (ShowFiltersView && filtersCount > 0)
            {
                <div class="pl-2 mt-1">
                    <button type="button" @onclick=@(_ => open = open == Features.Filters ? null : Features.Filters) class=@ToolbarButtonClass aria-expanded="false">
                        <svg class="flex-none w-5 h-5 mr-2 text-gray-400 dark:text-gray-500 group-hover:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
                        </svg>
                        <span class="mr-1">
                            @filtersCount @(filtersCount == 1 ? "Filter" : "Filters")
                        </span>
                    @if (open != Features.Filters)
                    {
                        <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                    }
                    else
                    {
                        <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd" />
                        </svg>
                    }
                    </button>
                </div>
            }
            @if (ShowNewItem && CreateOp != null)
            {
                <div class="pl-2 mt-1">
                    <button type="button" @onclick="OnShowNewItem" title=@($"New {typeof(Model).Name}") class=@ToolbarButtonClass>
                        <svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"></path></svg>
                        <span class="whitespace-nowrap">@($"New {typeof(Model).Name}")</span>
                    </button>
                </div>
            }
            @if (ToolbarButtons != null)
            {
                @ToolbarButtons
            }
            </div>
        </div>
    }

    @if (open == Features.Filters)
    {
        <FilterViews class="border-y border-gray-200 dark:border-gray-800 py-8 my-2" Columns="GetColumns()" Done="() => open = null" FiltersChanged="UpdateAsync" />
    }
    @if (errorSummary != null)
    {
        <ErrorSummary class="p-4" ExplicitStatus="EditApi?.Error ?? Api?.Error"  />
    }
    else if (apiLoading)
    {
        <Loading class="p-4 text-xl text-gray-500 dark:text-gray-400" ImageClass="w-5 h-5" />
    }
    else
    {
        <div>
            @if (Results.Count > 0)
            {
                <div>
                    <CascadingValue IsFixed="true" Value="this">
                        <DataGrid Id=@Id Model="Model" @ref="DataGrid" Items="Results" SelectedColumns="ApiPrefs.SelectedColumns"
                            PropertyChanged="_ => StateHasChanged()" FiltersChanged="UpdateAsync"
                            TableStyle=@TableStyle GridClass=@GridClass Grid2Class=@Grid2Class Grid3Class=@Grid3Class Grid4Class=@Grid4Class
                            TableClass=@TableClass TableHeadClass=@TableHeadClass TableHeaderRowClass=@TableHeaderRowClass TableHeaderCellClass=@TableHeaderCellClass TableBodyClass=@TableBodyClass
                            RowSelected="OnRowSelected" HeaderSelected="HeaderSelected" MaxFieldLength="MaxFieldLength"
                            AllowSelection="AllowSelection" AllowFiltering="AllowFiltering" FilterDefinitions="FilterDefinitions"
                            >
                            <CascadingValue IsFixed="true" Value="DataGrid">
                                @Columns
                            </CascadingValue>
                        </DataGrid>
                    </CascadingValue>
                </div>
            }
        </div>
    }

    </div>
    </CascadingValue>
    <DynamicModalLookup @ref="ModalLookup" AppMetadata=@AppMetadata />
}
